<template>
  <div class="vue-component-02">
    <MedoVRank2 :options="rankOptions"></MedoVRank2>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import MedoVRank2 from "@/components/vue-common/MedoVRank2.vue";

const data = reactive({
  rankOptions: {
    width: 400,
    height: 150,
    numColor: "#0D9AEC ",
    data: [
      {
        titleName: "业务名称1",
        color1: "#0150AB",
        color2: "#228DFF",
        color1Opacity: 0.48,
        color2Opacity: 0.5,
        num: 9999,
        unit: "人",
      },
      {
        titleName: "业务名称2",
        color1: "#E89858",
        color2: "#FFDA9F",
        color1Opacity: 0.48,
        color2Opacity: 0.5,
        num: 8888,
        unit: "人",
      },
      {
        titleName: "业务名称3",
        color1: "#67C23A",
        color2: "#67C23A",
        color1Opacity: 0.48,
        color2Opacity: 0.5,
        num: 7777,
        unit: "人",
      },
      {
        titleName: "业务名称4",
        color1: "#6AFFE8",
        color2: "#71E99D",
        color1Opacity: 0.48,
        color2Opacity: 0.5,
        num: 6666,
        unit: "人",
      },
      {
        titleName: "业务名称5",
        color1: "#67C23A",
        color2: "#67C23A",
        color1Opacity: 0.48,
        color2Opacity: 0.5,
        num: 555,
        unit: "人",
      },
    ],
  },
});

const { rankOptions } = toRefs(data);
</script>

<style scoped lang="less">
.vue-component-02 {
  display: flex;
  justify-content: space-around;
  width: 500px;
  background-color: #061740;
  padding: 20px;
}
</style>
